<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>vue事件传参</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>{{str}}</h1>

            <button @click="demo1(111)">点击传递一个 数据</button>

            <button @click="demo1()">点击传递一个 数据</button>

            <button @click="demo2(222,'学习事件传参')">点击传递2个 数据</button>

            <button @click="demo3(333,'学习事件传参',$event)">点击传递3个 数据</button>
        
            <button v-on:click="demo4(str)">传递data数据</button>
            
            <button @click="demo5">更新数据</button>
        </div>
    </body>

    <script type="text/javascript">

        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        new Vue({
            el:"#app",
            data:{
                str:"学习vue事件传参"
            },
            methods:{
                demo1(value){
                    alert(value);
                },
                demo2(v1,v2){
                    alert(v1+v2);
                },
                demo3(v1,v2,e){
                    // console.log(e);
                    alert(v1+v2+e.target.innerHTML);
                },
                demo4(value){
                    console.log(value);
                },
                demo5(){
                    console.log(this);  // vm
                    this.str= "这是更新后的数据";
                }
            }

        })
    </script>
</html>